<template>
  <cl-dialog v-model="visible" class="tongkang-view-order" width="90%" :close-on-click-modal="false">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>镜片订单详情</span>
        </div>
      </template>
      <el-form :model="orderData" label-width="120px" size="default">
        <el-divider content-position="left">收货基本信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收货人">
              <el-input v-model="orderData.contactName" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货电话">
              <el-input v-model="orderData.contactPhone" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收货地址">
              <el-input v-model="orderData.receiveAddress" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>

          

          <el-col :span="24" style="display: none;">
            <el-form-item label="备注">
              <el-input v-model="orderData.remark" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">门店订单基本信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="系统订单编号">
              <el-input v-model="orderData.order_no" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门店下单时间">
              <el-input v-model="orderData.shopOrderTime" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名" prop="data.o.c_shop_name">
              <el-input v-model="remarkObj.userName" readonly />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="眼镜品牌" prop="data.o.c_shop_name">
              <el-input v-model="remarkObj.brand" readonly />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="眼镜型号" prop="data.o.c_shop_name">
              <el-input v-model="remarkObj.model" readonly />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="眼镜颜色" prop="data.o.c_shop_name">
              <el-input v-model="remarkObj.frameColor" readonly />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="镜框物流单号" prop="data.o.c_shop_name">
              <el-input v-model="remarkObj.logisticsNo" readonly />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="订单备注" prop="data.o.c_shop_name">
              <el-input v-model="remarkObj.remark" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 订单基本信息 -->
        <el-divider content-position="left">瞳康订单基本信息</el-divider>
        <el-row :gutter="20">
          
          <el-col :span="12">
            <el-form-item label="瞳康订单编号">
              <el-input v-model="orderData.tongkangOrderNo" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间">
              <el-input v-model="orderData.create_time" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单状态">
              <el-input v-model="orderData.status_text" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="快递单号">
              <el-input v-model="orderData.kddh" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 镜片数据 -->
        <el-divider content-position="left">镜片数据</el-divider>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="镜片">
              <div class="inline-flex-container">
                <el-input v-model="orderData.c_goods_l_desc" readonly style="width: auto; min-width: 300px; margin-right: 8px; background-color: #f5f7fa;" />
                <!-- <div style="display: flex; align-items: center;">
                  <span style="margin-right: 4px;">数量：</span>
                  <el-input v-model="orderData.c_lnum" readonly style="width: 100px; background-color: #f5f7fa;" />
                </div> -->
              </div>
            </el-form-item>
          </el-col>
          
          <!-- <el-col :span="12">
            <el-form-item label="右镜片">
              <div class="inline-flex-container">
                <el-input v-model="orderData.c_goods_r_desc" readonly style="width: auto; min-width: 300px; margin-right: 8px; background-color: #f5f7fa;" />
                <div style="display: flex; align-items: center;">
                  <span style="margin-right: 4px;">数量：</span>
                  <el-input v-model="orderData.c_rnum" readonly style="width: 100px; background-color: #f5f7fa;" />
                </div>
              </div>
            </el-form-item>
          </el-col> -->

          <el-col :span="12">
            <el-form-item label="右直径R">
              <el-input v-model="orderData.c_diar" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="左直径R">
              <el-input v-model="orderData.c_dial" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="右球镜">
              <el-input v-model="orderData.c_rball" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="左球镜">
              <el-input v-model="orderData.c_lball" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="右柱镜">
              <el-input v-model="orderData.c_rpole" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="左柱镜">
              <el-input v-model="orderData.c_lpole" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12" v-if="orderData.c_radd != ''">
            <el-form-item label="右后表面离焦量">
              <el-input v-model="orderData.c_radd" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="orderData.c_ladd != ''">
            <el-form-item label="左后表面离焦量">
              <el-input v-model="orderData.c_ladd" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="右散光轴向">
              <el-input v-model="orderData.c_rline" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="左散光轴向">
              <el-input v-model="orderData.c_lline" readonly style="background-color: #f5f7fa;" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="右瞳距" prop="data.o.c_rpole">
              <el-input v-model="orderData.pd_r" placeholder="例子：179" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="左瞳距" prop="data.o.c_lpole">
              <el-input v-model="orderData.pd_l" placeholder="例子：179" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="右瞳高" prop="data.o.c_rpole">
              <el-input v-model="orderData.ph_r" placeholder="例子：179" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="左瞳高" prop="data.o.c_lpole">
              <el-input v-model="orderData.ph_l" placeholder="例子：179" />
            </el-form-item>
          </el-col>
          
          <el-divider content-position="left">加工模块</el-divider>

          <!-- 是否加工 -->
          <el-col :span="12">
            <el-form-item label="加工" prop="data.o.c_is_process">
              <el-radio-group v-model="orderData.c_is_process" :disabled="true">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- 加工模块：只在加工选择为"是"时显示 -->
          <el-col :span="24" v-if="orderData.c_is_process === '1'">
            <el-row :gutter="20">
              <!-- 加工方式 -->
              <el-col :span="12">
                <el-form-item label="加工方式" prop="data.o.c_process_type">
                  <el-input v-model="orderData.c_process_type_name" readonly style="background-color: #f5f7fa;" />
                </el-form-item>
              </el-col>
              
              <!-- 镀膜类型 -->
              <el-col :span="12">
                <el-form-item label="镀膜" prop="data.o.c_coating_type">
                  <el-input v-model="orderData.c_coating_type_name" readonly style="background-color: #f5f7fa;" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <!-- 操作按钮 -->
        <div class="form-actions">
          <el-button @click="closeDialog">关闭</el-button>
        </div>
      </el-form>
    </el-card>
  </cl-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { useCool } from '/@/cool';
import { useI18n } from 'vue-i18n';

const { service } = useCool();
const { t } = useI18n();
const visible = ref(false);
const emit = defineEmits(['closeDialog', 'update:modelValue']);

const props = defineProps({
  orderId: {
    type: Number,
    default: 0
  },
  modelValue: {
    type: Boolean,
    default: false
  }
})

// 加工列表参数
const processList = ref({
  processType: [
  ],
  coatingType: [
  ]
});


// 订单数据
const orderData = reactive({
  contactName: '',
  contactPhone: '',
  receiveAddress: '',
  shopOrderTime: '',
  order_no: '',
  create_time: '',
  status: 0,
  status_text: '',
  kddh: '',//快递单号
  c_dial: '',
  c_diar: '',
  c_lball: '',
  c_rball: '',
  c_lpole: '',
  c_rpole: '',
  c_goods_l: '',
  c_goods_r: '',
  c_goods_l_desc: '',
  c_goods_r_desc: '',
  c_lnum: 1,
  c_rnum: 1,
  c_ladd: '',
  c_radd: '',
  c_lline: '',
  c_rline: '',
  c_is_process: 0,
  pd_r: 0,
  pd_l: 0,
  ph_r: 0,
  ph_l: 0,
  remark: '',
  c_process_type: '',
  c_coating_type: '',
  c_process_type_name: '',
  c_coating_type_name: ''
});

const remarkObj = ref({
  // 配镜用户
  userName: '',
  // 品牌
  brand: '',
  // 眼镜型号
  model: '',
  // 镜框颜色
  frameColor: '',
  // 物流单号
  logisticsNo: '',
  // 备注字符串
  remark: ''
})

// 重置orderData的数据
async function resetOrderData() {
  console.log('重置数据')
  Object.assign(orderData, {
    contactName: '',
    contactPhone: '',
    receiveAddress: '',
    shopOrderTime: '',
    order_no: '',
    create_time: '',
    status: 0,
    status_text: '',
    kddh: '',//快递单号
    c_dial: '',
    c_diar: '',
    c_lball: '',
    c_rball: '',
    c_lpole: '',
    c_rpole: '',
    c_goods_l: '',
    c_goods_r: '',
    c_goods_l_desc: '',
    c_goods_r_desc: '',
    c_lnum: 1,
    c_rnum: 1,
    c_ladd: '',
    c_radd: '',
    c_lline: '',
    c_rline: '',
    c_is_process: 0,
    pd_r: 0,
    pd_l: 0,
    ph_r: 0,
    ph_l: 0,
    remark: '',
    c_process_type: '',
    c_coating_type: '',
    c_process_type_name: '',
    c_coating_type_name: ''
  });

  remarkObj.value = {
    brand: '',
    model: '',
    frameColor: '',
    logisticsNo: '',
    userName: '',
    remark: ''
  }
  
}

// 获取订单详情
async function getOrderDetail() {
  // 重置orderData的数据
  resetOrderData()
  if (!props.orderId) {
    ElMessage.error('订单ID不能为空');
    return;
  }
  
  try {
    // 调用API获取订单详情
    const res = await service.order.order.info({
      id: props.orderId
    });
    // console.log('getOrderDetail', res, res.data)
    if (res) {
      // 将tongkangOrderRequestData赋值给orderData
      Object.assign(orderData, res.optometricsData);
      console.log(res.data, res.optometricsData)
      orderData.order_no = res.orderNo
      orderData.tongkangOrderNo = res.tongkangOrderNo
      orderData.create_time = res.tongkangOrderTime
      orderData.kddh = res.zhongtianLogisticsNo
      orderData.status_text = '';
      orderData.shopOrderTime = res.shopOrderTime


      console.log('remarkParts', orderData.remark)
      // 根据remark拆分赋值给remarkObj
      if (orderData.remark) {
        const remarkParts = orderData.remark.split(',');
        
        remarkObj.value.userName = remarkParts[0]
        remarkObj.value.brand = remarkParts[1]
        remarkObj.value.model = remarkParts[2]
        remarkObj.value.frameColor = remarkParts[3]
        remarkObj.value.logisticsNo = remarkParts[4]
        remarkObj.value.remark = remarkParts[5]
      }

    } else {
      ElMessage.error('获取订单详情失败');
    }
  } catch (error) {
    console.error('获取订单详情失败:', error);
    ElMessage.error('获取订单详情失败');
  }
}

// 关闭弹窗
function closeDialog() {
  emit('closeDialog');
}

// 监听 modelValue 变化
watch(
  () => props.modelValue,
  val => {
    visible.value = val;
    if (val && props.orderId) {
      getOrderDetail();
    }
  }
);

// 监听 visible 变化
watch(
  () => visible.value,
  val => {
    emit('update:modelValue', val);
  }
);

// 监听 orderId 变化，重新获取订单详情
watch(
  () => props.orderId,
  (newOrderId) => {
    if (newOrderId && visible.value) {
      getOrderDetail();
    }
  }
);
</script>
<style scoped>
.zhongtian-add-order {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-item,
.payment-item {
  margin-bottom: 20px;
}

.detail-header,
.payment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.border-top-blue {
  border-top: 3px solid #409eff;
}

.form-actions {
  margin-top: 30px;
  text-align: center;
}

.form-actions .el-button {
  margin: 0 10px;
}

/* 添加新的样式类 */
.inline-flex-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>